ngFor

Como utilizar la sentencia de control ngFor para mostrar etiquetas varias veces a traves de una serie de iteracciones

Podemos usar el ngFor de la siguiente manera:

Si tenemos el siguiente componente:

import { Component } from '@angular/core';

@Component({
    selector: 'empleado',
    templateUrl: './empleados.component.html'
  })

export class empleadosComponent {
    numeros:Array<number> = [1,4,3,6,8,5];
  }

Podemos utilizar el ngFor de la siguiente manera:

<p *ngFor="let num of numeros">{{num}}</p>

Utilizamos la directiva *ngFor indicando sobre que datos queremos iterar

En este caso iteramos sobre el array de numeros y utilizamos la variable num dentro de la etiqueta.

Tambien podemos utilizar un indice dentro del bucle de esta manera:

<p *ngFor="let num of numeros; let i = index">{{num}} Index:{{i}}</p>

Angular | ngFor